<template>
  <div class="find-work-container">
    <!-- 顶部广告区域 -->
    <div class="top-banner">
    </div>

    <!-- 职位列表区域 -->
    <div class="job-list-container">
      <!-- 职位类型筛选 -->
      <div class="job-filter">
        <div class="filter-title">职位类别</div>
        <div class="filter-content">
          <div v-for="(category, index) in jobTypes" :key="index" class="filter-category">
            <div class="category-name" @click="toggleCategory(index)">
              <span>{{ category.name }}</span>
              <span class="toggle-icon">{{ categoryExpanded[index] ? 'v' : '>' }}</span>
            </div>
            <div v-show="categoryExpanded[index]" class="category-items">
              <div v-for="job in category.child" :key="job.jobs_type_id" class="category-item"
                :class="{ 'active': selectedJobTypeId === job.jobs_type_id }" @click="selectJobType(job.jobs_type_id)">
                {{ job.name }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧内容区域 -->
      <div class="job-content-area">
        <!-- 搜索框 -->
        <div class="search-box">
          <el-input v-model="keywords" placeholder="按关键字搜索" class="search-input" clearable>
            <template #prefix>
              <el-icon>
                <Search />
              </el-icon>
            </template>
          </el-input>
          <el-button type="primary" @click="searchJobs" class="search-btn">搜索</el-button>
        </div>
        <!-- 职位统计信息 -->
        <div class="job-stats">
          <span>搜索结果工作机会总数 显示 1 至 {{ jobList.length }} 项 (共 {{ totalCount }} 项)</span>
        </div>
        <!-- 筛选选项 -->
        <div class="filter-options">
          <div class="filter-option">
            <span>隐藏过期招聘</span>
            <el-checkbox v-model="hideExpired" @change="searchJobs" />
          </div>
          <div class="filter-option">
            <span>显示详细信息</span>
            <el-checkbox v-model="showDetails" />
          </div>
          <div class="pagination-controls">
            <el-button :disabled="currentPage <= 1" @click="prevPage">上一页</el-button>
            <el-button @click="nextPage">下一页</el-button>
          </div>
        </div>
        <!-- 职位列表 -->
        <div class="job-list">
          <div v-for="job in jobList" :key="job.id" class="job-item">
            <!-- 职位标题和类型 -->
            <div class="job-header">
              <div class="job-title">
                <el-icon>
                  <CollectionTag />
                </el-icon>
                <span>{{ job.name }}</span>
                <span class="job-type">{{ job.jobs_type_name }}</span>
              </div>
            </div>

            <!-- 职位内容 -->
            <div v-if="showDetails" class="job-content">
              <p>{{ job.content }}</p>
            </div>

            <!-- 职位详情 -->
            <div class="job-details">
              <!-- 薪资范围 -->
              <div class="job-salary">
                <el-icon>
                  <Money />
                </el-icon>
                <span>{{ job.salary_range }}</span>
              </div>

              <!-- 招聘人数 -->
              <div class="job-recruits">
                <el-icon>
                  <User />
                </el-icon>
                <span>合同人数: {{ job.persons_int }}/{{ job.recruits_people }}人</span>
              </div>

              <!-- 截止日期 -->
              <div class="job-deadline">
                <el-icon>
                  <Calendar />
                </el-icon>
                <span>截止日期: {{ job.limit_time }}</span>
                <span v-if="job.last_day > 0" class="days-left">(剩余{{ job.last_day }}天)</span>
                <span v-else class="days-expired">(已过期)</span>
              </div>
            </div>

            <!-- 发布信息 -->
            <div class="job-footer">
              <div class="publisher">
                <el-avatar :size="30" :src="job.user?.avatar || ''">{{ job.user?.username?.charAt(0) || '用户'
                }}</el-avatar>
                <span>发布日期: {{ job.createtime }}</span>
              </div>
              <el-button type="primary" class="apply-btn">申请工作</el-button>
            </div>
          </div>

        </div>

        <!-- 分页 -->
        <div class="pagination">
          <el-pagination v-model:current-page="currentPage" :page-size="pageSize" :total="totalCount"
            layout="prev, pager, next" @current-change="handlePageChange" />
        </div>
      </div>
    </div>
  </div>

</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { jobsApi } from '../api/index.js'
import { ElMessage } from 'element-plus'

// 职位类型数据
const jobTypes = ref([])
const selectedJobTypeId = ref('')
const categoryExpanded = ref({}) // 存储每个类别的展开/折叠状态

// 职位列表数据
const jobList = ref([])
const totalCount = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)

// 搜索和筛选条件
const keywords = ref('')
const hideExpired = ref(false)
const showDetails = ref(true)

// 获取职位类型
const getJobTypes = async () => {
  try {
    const res = await jobsApi.getJobsType()
    if (res.code === 1) {
      jobTypes.value = res.data
      // 初始化每个类别的折叠状态，默认展开
      jobTypes.value.forEach((category, index) => {
        categoryExpanded.value[index] = true
      })
    } else {
      ElMessage.error(res.msg || '获取职位类型失败')
    }
  } catch (error) {
    console.error('获取职位类型出错:', error)
    ElMessage.error('获取职位类型失败')
  }
}

// 获取职位列表
const getJobsList = async () => {
  try {
    const params = {
      page: currentPage.value,
      limit: pageSize.value,
      hide_expired: hideExpired.value ? 1 : '',
      jobs_type_id: selectedJobTypeId.value,
      keywords: keywords.value
    }

    const res = await jobsApi.getJobsList(params)
    if (res.code === 1) {
      jobList.value = res.data.list
      totalCount.value = parseInt(res.data.totalCount)
    } else {
      ElMessage.error(res.msg || '获取职位列表失败')
    }
  } catch (error) {
    console.error('获取职位列表出错:', error)
    ElMessage.error('获取职位列表失败')
  }
}

// 选择职位类型
const selectJobType = (typeId) => {
  if (selectedJobTypeId.value === typeId) {
    selectedJobTypeId.value = ''
  } else {
    selectedJobTypeId.value = typeId
  }
  currentPage.value = 1
  searchJobs()
}

// 切换类别的折叠状态
const toggleCategory = (index) => {
  categoryExpanded.value[index] = !categoryExpanded.value[index]
}

// 搜索职位
const searchJobs = () => {
  currentPage.value = 1
  getJobsList()
}

// 页码变化处理
const handlePageChange = (page) => {
  currentPage.value = page
  getJobsList()
}

// 上一页
const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
    getJobsList()
  }
}

// 下一页
const nextPage = () => {
  if (currentPage.value * pageSize.value < totalCount.value) {
    currentPage.value++
    getJobsList()
  }
}

// 页面加载时获取数据
onMounted(() => {
  getJobTypes()
  getJobsList()
})
</script>

<style scoped>
.find-work-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
}

/* 顶部广告区域 */
.top-banner {
  background-image: url('/img/banner_find_worker.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  margin-bottom: 20px;
  height: 160px;
  width: 100%;
}

.banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 800px;
}

.banner-text {
  color: white;
  font-size: 18px;
  font-weight: bold;
}

.search-button {
  font-weight: bold;
}

/* 职位列表区域 */
.job-list-container {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  gap: 20px;
}

/* 职位统计信息 */
.job-stats {
  margin-bottom: 20px;
  color: #666;
  font-size: 14px;
}

/* 职位类型筛选 */
.job-filter {
  width: 250px;
  flex-shrink: 0;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  align-self: flex-start;
}

.filter-title {
  background-color: #f5f5f5;
  padding: 10px 15px;
  font-weight: bold;
  border-bottom: 1px solid #e0e0e0;

}

.filter-content {
  padding: 15px;
}

.filter-category {
  margin-bottom: 15px;
}

.category-name {
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.category-name:hover {
  background-color: #f5f5f5;
}

.toggle-icon {
  font-size: 12px;
  color: #666;
}

.category-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.category-item {
  padding: 5px 10px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 12px;
}

.category-item:hover {
  background-color: #f0f9ff;
  border-color: #4a90e2;
}

.category-item.active {
  background-color: #4a90e2;
  color: white;
  border-color: #4a90e2;
}

/* 搜索框 */
.search-box {
  display: flex;
  margin-bottom: 20px;
  gap: 10px;
  width: 100%;
}

.search-input {
  flex: 1;
}

/* 筛选选项 */
.filter-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  width: 100%;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pagination-controls {
  display: flex;
  gap: 10px;
}

/* 右侧内容区域 */
.job-content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 职位列表 */
.job-list {
  width: 100%;
  flex: 1;
  overflow-y: auto;
  margin-bottom: 20px;
}

.job-item {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  transition: all 0.3s;
}

.job-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.job-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.job-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: bold;
}

.job-type {
  font-size: 12px;
  color: #4a90e2;
  font-weight: normal;
  margin-left: 10px;
}

.job-details {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 15px;
}

.job-salary,
.job-recruits,
.job-deadline {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #666;
  font-size: 14px;
}

.days-left {
  color: #4a90e2;
}

.days-expired {
  color: #ff4d4f;
}

.job-content {
  margin-bottom: 15px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.job-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #e0e0e0;
  padding-top: 15px;
  font-size: 12px;
}

.publisher {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #666;
}

/* 分页 */
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  width: 100%;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .banner-content {
    flex-direction: column;
    gap: 15px;
  }

  .job-details {
    flex-direction: column;
    gap: 10px;
  }

  .filter-options {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .pagination-controls {
    width: 100%;
    justify-content: space-between;
  }
}
</style>